<style>
    .pTitle {
        margin-top: 0px;
    }

    .pTitle span {
        display: inline;
        font-size: 24px;
        line-height: 34px;
        font-weight: 400;
        overflow: hidden;
    }

    .question {
        color: #2baab1;
        color: #2baab1;
        height: 26px;
        font-size: 26px;
    }

    .problem-info {
        padding-bottom: 12px;
        padding-top: 8px;
        margin-bottom: 25px;
        border-bottom: 1px solid #e8ecee;
    }

    .problem-info span {
        font-size: 12px;
        color: #9eadb6;
    }

    .f-pipe {
        margin: 0 8px;
        height: 13px;
        overflow: hidden;
        width: 1px;
        position: relative;
        top: -2px;
        background: #e8ecee;
        color: #e8ecee;
        display: inline-block;
        vertical-align: middle;
    }

    .answer-bar {
        display: inline-block;
        margin-bottom: 10px;
        width: 90px;
        height: 34px;
        background: #4dc86f;
        border-radius: 4px;
        font-size: 14px;
        text-align: center;
        color: #fff;
        line-height: 34px;
        cursor: pointer;
    }

    .answer-line {
        position: relative;
        line-height: 29px;
        margin-top: 15px;
    }

    .answerContent {
        width: 70%;
        display: none;
    }

    .submit-btn {
        cursor: pointer;
        color: #fff;
        display: inline-block;
        text-align: center;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
        font-family: "Microsoft Yahei";
        font-size: 15px;
        padding: 0 15px;
        background: #4dc86f;
        border-color: #4dc86f;

    }

    .submit-answer {
        margin-top: 10px;
        text-align: right;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .my-answer {
        padding-top: 15px;
        padding-bottom: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e8ecee;
        position: relative;
        margin-left: 50px;
        margin-right: 50px;
        background-color: #fff;
        padding-left: 30px;
    }

    .answer-title {
        margin-top: 2px;
        height: 26px;
        font-size: 22px;
        color: #35b558;
        font-weight: 400;
    }

    .c-time {
        display: inline;
        font-size: 12px;
        color: #9eadb6;
    }

    .my-answer-content {
        margin-top: 5px;
        font-size: 14px;
        line-height: 24px;
        color: #333;
    }

    .footer-line {
        height: 32px;
        margin-top: 15px;
        line-height: 32px;
    }

    .del-myAnswer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 10px;
        cursor: pointer;
    }

    .edit-myAnswer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 50px;
        cursor: pointer;
    }

    .edit-cancle {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: none;
        width: auto;
        padding: 0 15px;
        margin-right: 10px;
        cursor: pointer;
    }

    .my-answer-icon {
        width: 26px;
        height: 26px;
        display: inline-block;
        line-height: 0px;
        color: #35b558
    }

    .otherReplay {
        padding-bottom: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e8ecee;
        background-color: #fff;
    }

    .adopt-answer {
        float: right;
        border: 1px solid #DAE0E4;
        font-size: 14px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        color: #33b358;
        display: inline-block;
        width: auto;
        padding: 0 15px;
        margin-right: 50px;
        cursor: pointer;
    }

    #problem-data {
        margin-top: 20px;
        position: relative;
        margin-left: 50px;
        margin-right: 50px;
        background-color: #fff;
        padding-left: 30px;
    }

    #problem-data ::after {
        position: absolute;
        top: 23px;
        left: -6px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
        content: '';
    }

    .leftDate {
        position: absolute;
        top: 10px;
        left: -20px;
        width: 40px;
        height: 40px;
        line-height: 36px;
        font-size: 10px;
        border: 2px solid #e36159;
        color: #e36159;
        background-color: #fff;
        text-align: center;
        border-radius: 50%;
    }

    .my-answer:after {
        position: absolute;
        top: 23px;
        left: -6px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
        content: '';
    }
    .head-line {
        margin-bottom: 10px;
    }
    .leftTop {
        content: '';
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        line-height: 35px;
        text-align: center;
        border-radius: 50em;
        -moz-border-radius: 50em;
        -webkit-border-radius: 50em;
        top: 0;
        left: 46px;
        font-size: 15px;
        border: 2px solid lightgray;
        color: #00ccde;
        background-color: #fff;
    }
</style>
<script>
    var ifAnswer = {{ ifAnswer }};
</script>
<div class="smart-widget" style="background-color:#f5f5f5;border: 0px;margin-bottom: 0px;height: 100%;overflow: auto;">
    <div class="smart-widget-inner">
        <div class="smart-widget-body" style="position: relative;padding: 16px;padding-top:60px;">
            <div style="height:98%; width: 3px;background-color:#e7eaef;position: absolute;left: 65px;top: 30px;"></div>
            <div class="leftTop">首</div>
            <div style="position: relative;margin-left: 50px;margin-bottom: 25px;">
                <div id="problem-data">
                    <h1 class="pTitle">
                        <i class="fa fa-question-circle-o fa-lg fa-fw question"></i>
                        <span>{{ webProblem['sTitle'] }}</span>
                    </h1>
                    <div id='pContent' style="word-wrap:break-word;width: 100%">
                        {{ webProblem['sContent'] }}
                    </div>
                    <div class="problem-info">
                        <span>{{ webProblem['tCreateDate'] }}</span>
                        <span class="f-pipe" style="">|</span>
                        <span> {{ webProblem['sCreateUserName'] }}</span>
                        <span id="v-times" class="f-pipe" style="">|</span>
                        <span>{{ webProblem['sSchoolName'] }}</span>
                        <span style="margin-left: 10px">{{ webProblem['sAdClsName'] }}</span>
                    </div>
                    <input type="hidden" name="iProblemId" id="iProblemId" value="{{ iProblemId }}">
                    <input type="hidden" name="iProblemId" id="iProblemId" value="{{ iProblemId }}">
                    {% if ifAnswer == 1 %}
                        <div class="answer-line">
                            <span class="answer-bar"><i class="fa fa-pencil-square-o fa-lg fa-fw"></i>回复</span>
                        </div>
                        <div class="answerContent">
                            <textarea name='sContent' id='sContent' rows="13" style="height:380px;"></textarea>
                            <div class="submit-answer">
                                <span class="submit-btn">提交</span>
                            </div>
                        </div>
                    {% endif %}
                </div>
                <div class="leftDate">
                    {{ webProblem['date'] }}
                </div>
            </div>
            {% for key,reply in replys %}
                {% if reply['iCreateUserId'] == userId %}
                    <div style="position: relative;margin-left: 50px;margin-bottom: 25px;">
                        <div class="my-answer">
                            <div class="head-line">
                                <i class="fa fa-user-o fa-lg fa-fw my-answer-icon"></i>
                                <span class="answer-title">我的回复</span>
                                {% if reply['bBest'] == 1 %}
                                    <i class="fa fa-thumbs-o-up fa-lg fa-fw my-answer-icon"
                                       style="margin-left: 10px"></i>
                                    <span class="answer-title">最佳回复</span>
                                {% endif %}
                            </div>
                            <div class="my-answer-content">
                                    <span class="con" style="word-wrap:break-word;width: 100%">
                                    {{ reply['sContent'] }}
                                </span>
                            </div>
                            <div class="footer-line">
                                <span class="c-time">回复时间：{{ reply['tCreateDate'] }}</span>
                                {% if webProblem['iStatus'] == 1 and ifEdit == 1 %}

                                    {% if ifAdopt == 1 %}
                                        <span class="adopt-answer" style="float:right" data-id="{{ reply['iId'] }}">审核通过</span>
                                    {% endif %}
                                    <span class="edit-myAnswer" style="margin-right: 10px;" data-id="{{ reply['iId'] }}">编辑</span>
                                    <span class="edit-cancle" style="margin-right: 10px;" data-id="{{ reply['iId'] }}">取消</span>
                                {% endif %}
                                {% if webProblem['iStatus'] == 1 and ifDel == 1 and reply['bBest'] != 1 %}
                                    <span class="del-myAnswer" data-id="{{ reply['iId'] }}">× 删除</span>
                                {% endif %}

                            </div>
                            <div class="answerContent">
                                <textarea name='sContent' id='sContent' rows="13" style="height:380px;"></textarea>
                                <div class="submit-answer">
                                    <span class="submit-btn" data-id="{{ reply['iId'] }}">提交</span>
                                </div>
                            </div>
                        </div>
                        <div class="leftDate">
                            {{ reply['date'] }}
                        </div>
                    </div>
                {% elseif reply['bBest'] == 1 %}
                    <div style="position: relative;margin-left: 50px;margin-bottom: 25px;">
                        <div class="my-answer">
                            <div class="head-line">
                                <i class="fa fa-thumbs-o-up fa-lg fa-fw my-answer-icon"></i>
                                <span class="answer-title">最佳回复</span>
                            </div>
                            <div class="my-answer-content">
                                <span class="con" style="word-wrap:break-word;width: 100%">
                                    {{ reply['sContent'] }}
                                </span>
                            </div>
                            <div class="footer-line">
                                <span class="c-time">{{ reply['sCreateUserName'] }}</span>
                                <span id="v-times" class="f-pipe" style="">|</span>
                                <span class="c-time">回复于{{ reply['tCreateDate'] }}</span>
                            </div>
                        </div>
                        <div class="leftDate">
                            {{ reply['date'] }}
                        </div>
                    </div>

                {% endif %}

            {% endfor %}
            {% if otherReplys %}
                {% for k,otherReply in otherReplys %}
                    <div style="position: relative;margin-left: 50px;">
                        <div class="my-answer">
                            {% if k == 0 %}
                                <div class="head-line">
                                    {% if replys %}
                                        <span style="font-size: 20px;font-weight: 400;color: #798e99;">其他回复</span>
                                    {% else %}
                                        <span style="font-size: 20px;font-weight: 400;color: #798e99;">全部回复</span>
                                    {% endif %}

                                </div>
                            {% endif %}
                            <div class="my-answer-content">
                                <span class="con" style="word-wrap:break-word;width: 100%">
                                    {{ otherReply['sContent'] }}
                                </span>
                            </div>
                            <div class="footer-line">
                                <span class="c-time">{{ otherReply['sCreateUserName'] }}</span>
                                <span id="v-times" class="f-pipe" style="">|</span>
                                <span class="c-time">回复于{{ otherReply['tCreateDate'] }}</span>
                                {% if ifAdopt == 1 %}
                                    <span class="adopt-answer" data-id="{{ otherReply['iId'] }}">审核通过</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="leftDate">
                            {{ otherReply['date'] }}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}


        </div>
    </div>
</div>

